<template>
  <div>
    <div class="feature-container page-container">
      <div class="top">
        <div class="title">Multi-Dim Feature</div>
      </div>
      <div class="bottom">
        <el-table
          :data="tableData"
          :span-method="objectSpanMethod"
          :row-class-name="tableRowClassName"
          :cell-class-name="cellClassName"
          header-row-class-name="tabletitle"
        >
          <el-table-column
            prop="feature_domain"
            label="Feature Domain"
            sortable
            min-width="150"
          >
          </el-table-column>
          <el-table-column prop="type" label="Type" sortable min-width="210">
          </el-table-column>
          <el-table-column prop="name" label="Name" sortable min-width="120">
          </el-table-column>
          <el-table-column prop="num" label="Number of" sortable width="160">
          </el-table-column>
          <el-table-column prop="num" label="Decripttion" sortable width="120">
          </el-table-column>
          <!-- <el-table-column prop="address" label="Size" width="110">
          </el-table-column>
          <el-table-column prop="address" label="Number of" min-width="120">
          </el-table-column> -->
          <!-- <el-table-column
            prop="address"
            label="Best performation"
            min-width="130"
            width="auto"
          >
          </el-table-column> 
          <el-table-column prop="address" label="Sorve" width="80">
          </el-table-column>-->
          <el-table-column
            prop="Details"
            label="Details"
            width="80"
            align="center"
          >
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="Details"
                placement="bottom"
              >
                <div class="detail-icon" @click="goDetail(scope)"></div>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
let lastItem = null;
let lastItemIndex = 0;
export default {
  data() {
    return {
      tableData: [],
      defaultConcat: {
        rowspan: 1,
        colspan: 1,
      },
      nowConcat: {
        rowspan: 1,
        colspan: 1,
      },
      lastItem: "",  //缓存上一个值
      columnArr: ['feature_domain',"type","num"], // 缓存已有列 index
      indexArr: [], // 缓存已有列 index
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$api.getFeatureCategoryInfo().then((res) => {
        // let contain = [];
        this.tableData = res;
      });
    },
    // getData() {
    //   let that = this;
    //   const pids = [];
    //   const data = [];
    //   this.$api.getFeatureCategoryInfo().then((res) => {
    //     console.log(111, res);
    //     function each(arr) {
    //       arr.forEach((i) => {
    //         pids.push(i.pid);
    //         let a = JSON.parse(JSON.stringify(i));
    //         a.childList = "";
    //         data.push(a);
    //         if (i.childList.length > 0) {
    //           each(i.childList);
    //         }
    //       });
    //     }
    //     // 遍历迭代
    //     res.forEach((i) => {
    //       pids.push(i.pid);
    //       let a = JSON.parse(JSON.stringify(i));
    //       a.childList = "";
    //       data.push(a);
    //       if (i.childList.length > 0) {
    //         each(i.childList);
    //       }
    //     });
    //     console.log(222, data);
    //     pids.sort(function(a, b) {
    //       return a - b;
    //     });
    //     console.log(666, pids);
    //     // let contain = [];
    //     this.tableData = data
    //   });
    // },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(3, row, column, rowIndex, columnIndex);
      // if (rowIndex === columnIndex) {
      //   lastItem = row;
      //   lastItemIndex = columnIndex;
      //   console.log(4, lastItem);
      // }
      // if ((row.pid = lastItem.pid && columnIndex == lastItemIndex)) {
      //   return {
      //     rowspan: 2,
      //     colspan: 1,
      //   };
      // } else {
      //   return {
      //     rowspan: 1,
      //     colspan: 1,
      //   };
      // }

      // if(this.indexArr.indexOf(columnIndex) >= 0){
      //   if(row[this.columnArr[columnIndex]] = this.lastItem){
      //     this.nowConcat.rowspan++
      //     return this.nowConcat
      //   }
      // } else {
      //   this.indexArr.push(columnIndex)
      //   this.lastItem = row[this.columnArr[columnIndex]]
      //   this.nowConcat = this.defaultConcat
      //     return this.nowConcat
      //   // this.lastItem = 
      // }

      const dataProvider = this.tableData
      const cellValue = row[column.property]
      if (cellValue) {
        // 上一条数据
        const prevRow = dataProvider[rowIndex - 1]
        // 下一条数据
        let nextRow = dataProvider[rowIndex + 1]
        // 当上一条数据等于下一条数据
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let rowspan = 1
          while (nextRow && nextRow[column.property] === cellValue) {
            rowspan++
            nextRow = dataProvider[rowspan + rowIndex]
          }
          if (rowspan > 1) {
            return { rowspan, colspan: 1 }
          }
        }
      }


      // if (columnIndex === 0) {
      //   if ((row.pid = lastItem.pid)) {
      //     return {
      //       rowspan: 2,
      //       colspan: 1,
      //     };
      //   } else {
      //     return {
      //       rowspan: 1,
      //       colspan: 1,
      //     };
      //   }
      // } else if (columnIndex === 1) {
      //   return {
      //     rowspan: 1,
      //     colspan: 1,
      //   };
      // }
    },
    // 自定义行样式
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "color-row";
      }
      return "";
    },
    // 列
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return "first-col";
      }
    },
    goDetail(scope) {
      this.$router.push({
        path: "/collectionDtail",
        query: { featureId: scope.row.id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-container {
  margin: 0 auto;
  margin-top: 24px;
  margin-bottom: 137px;
  width: 1340px;
  background: #ffffff;
  border-radius: 2px 2px 0px 0px;
  &.feature-container {
    // display: inline-block;
    padding: 0 16px;
    padding-bottom: 40px;
  }
  .top {
    margin: 0 auto;
    .title {
      padding-left: 10px;
      padding-top: 20px;
      padding-bottom: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #17233d;
      line-height: 24px;
    }
  }
}
::v-deep .el-table {
  display: inline-block;
  margin: 0 auto;
  margin-top: 20px;
  .el-table__cell {
    border-right: 1px solid #ebeef5;
  }
  .color-row {
    background-color: #f8f8f9;
  }
  .tabletitle {
    background: #f3efff;
    .el-table__cell {
      background: transparent;
      font-family: Helvetica-Bold, Helvetica;
      font-weight: bold;
      color: #17233d;
      line-height: 22px;
      border-right: none;
    }
  }
  .detail {
    .cell {
      text-align: center;
    }
  }
  .detail-icon {
    margin: 0 auto;
    width: 17px;
    height: 18px;
    background-image: url(~@/assets/img/icon_details.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
  }
  .first-col {
    background: #edfff8;
  }
}

// 响应式设计

@media screen and (max-width: 768px) {
  ::v-deep .feature-container {
    width: 100%;
  }
}
</style>
